<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="col-title-box">
            <div class="col-title">可供批量导入案件的模板</div>
            <el-divider direction="vertical"></el-divider>
            <el-button v-if="showIndex1" size="mini" type="text" @click="showIndex1 = !showIndex1">收起</el-button>
            <el-button v-else size="mini" type="text" @click="showIndex1 = !showIndex1">展开</el-button>
          </div>
          <template v-if="showIndex1">
            <div class="tips"> <span>提示</span> 您可以点击下方按钮, 下载要使用的模板, 下载后请不要修改表头, 填写好案件信息后在下方上传, 即可批量导入案件.</div>
            <div style="display: flex;flex-direction: row;justify-content: flex-end;">
              <el-button type="primary" icon="el-icon-download" @click="downExcel">下载调解案件模板</el-button>
            </div>

          </template>


        </el-card>
        <el-card class="box-card">
          <div slot="header" class="col-title-box">
            <div class="col-title">处理本批案件的机构和调解员</div>
            <el-divider direction="vertical"></el-divider>
            <el-button v-if="showIndex2" size="mini" type="text" @click="showIndex2 = !showIndex2">收起</el-button>
            <el-button v-else size="mini" type="text" @click="showIndex2 = !showIndex2">展开</el-button>
          </div>
          <el-form v-if="showIndex2" :model="form" :rules="rules" ref="form" label-width="80px">
            <el-form-item label="所属机构" prop="deptId">
              <el-select v-model="form.deptId" placeholder="请选择所属机构" prop="deptId" style="width: 100%;"
                @change="form.mediatorId = ''; loadUsers()">
                <el-option v-for="(item, index) in deptOptions" :key="index" :label="item.deptName"
                  :value="item.deptId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="调解员" prop="mediatorId">
              <el-select v-model="form.mediatorId" placeholder="请选择调解员" style="width: 100%;">
                <el-option v-for="(item, index) in userOptions" :key="index" :label="item.nickName"
                  :value="item.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-form>

        </el-card>
        <el-card class="box-card">
          <div slot="header" class="col-title-box">
            <div class="col-title">第一步 上传案件Excel</div>
            <el-divider direction="vertical"></el-divider>
            <el-button v-if="showIndex3" size="mini" type="text" @click="showIndex3 = !showIndex3">收起</el-button>
            <el-button v-else size="mini" type="text" @click="showIndex3 = !showIndex3">展开</el-button>
          </div>
          <div v-if="showIndex3"
            style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
            <el-upload class="upload-demo" drag action="#" :multiple="false" :file-list="fileList"
                :http-request="requestUpload" :before-upload="beforeUpload">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </div>
   
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="col-title-box">
            <div class="col-title">第二步 预览</div>
            <el-divider direction="vertical"></el-divider>
            <el-button v-if="showIndex4" size="mini" type="text" @click="showIndex4 = !showIndex4">收起</el-button>
            <el-button v-else size="mini" type="text" @click="showIndex4 = !showIndex4">展开</el-button>
          </div>
          <el-table v-if="showIndex4" :data="list" border style="width: 100%" height="68vh">
            <el-table-column prop="caseNumber" label="案号" align="center" />
            <!-- <el-table-column prop="deptId" label="所属机构" align="center">
              <template slot-scope="scope">
                <span>{{ deptMap[scope.row.deptId] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="caseStage" label="阶段" align="center">
              <template slot-scope="scope">
                <span>{{ caseStageMap[scope.row.caseStage] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="flag" label="节点" align="center">
              <template slot-scope="scope">
                <span>{{ flagMap[scope.row.flag] }}</span>
              </template>
            </el-table-column> -->
             <el-table-column prop="caseAmount" label="标的金额" align="center" />
            <el-table-column prop="reason" label="案由" align="center" />
            <el-table-column prop="userName" label="原告" align="center"/>
            <el-table-column prop="userName2" label="被告" align="center" />
             <el-table-column prop="importStatus" label="结果" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.importStatus != 0" type="success">成功</el-tag>
                <el-tag v-else type="danger">失败</el-tag>
              </template>
             </el-table-column>
             <el-table-column prop="failureMsg" label="原因" align="center" />
           
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listDept } from "@/api/system/dept"
import { listUser } from "@/api/system/user"
import { importCaseInfo } from "@/api/case/info"
export default {
  name: '',
  data() {
    return {
      jgPid: process.env.VUE_APP_JG_PID,
      showIndex1: true,
      showIndex2: true,
      showIndex3: true,
      showIndex4: true,
      form: {
        deptId: '',
        mediatorId: '',
      },
      rules: {
        deptId: [{ required: true, message: '请选择所属机构', trigger: 'change' }]
      },
      list:[],
      deptMap:{},
      fileList: [],
      deptOptions: [],
      userOptions: [],
      file: null,
    }
  },
  created() {
    this.loadDepts()
  },
  methods: {
    downExcel() {
      let a = document.createElement('a') // 创建a标签
      a.href = '../../static/template.xlsx' // 文件路径
      a.download = '调解案件模板.xlsx' // 文件名称
      a.style.display = 'none' // 隐藏a标签
      document.body.appendChild(a)
      // 定时器(可选)
      setTimeout(() => {
        a.click() // 模拟点击(要加)
        document.removeChild(a) //删除元素(要加)
        setTimeout(() => {
          self.URL.revokeObjectURL(a.href) // 用来释放文件路径(可选)
        }, 200)
      }, 66)
    },
    loadDepts() {
      listDept().then(res => {
        this.deptOptions = res.data.filter(item => item.parentId == this.jgPid)
        // for (let i = 0; i < this.deptOptions.length; i++) {
        //   const dept = this.deptOptions[i];
        //   this.deptMap[dept.deptId] = dept.deptName
        // }
      })
    },
    loadUsers() {
      listUser({
        pageNum: 1,
        pageSize: 9999,
        deptId: this.form.deptId,
        roleId: process.env.VUE_APP_TJ_ROLE_ID
      }).then(res => {
        this.userOptions = res.rows
      })
    },
    requestUpload(e) {
      let formData = new FormData()
      formData.append('file', e.file)
      formData.append('deptId', this.form.deptId)
      if (this.form.mediatorId) {
        formData.append('mediatorId', this.form.mediatorId)
      }

      importCaseInfo(formData).then(res => {
        this.list = res.data
        this.$message({
          message: '批量导入成功',
          type: 'success'
        });
      })
    },
    beforeUpload(file) {
      this.$refs.form.validate((valid) => { })
      if (!this.form.deptId) {
        this.fileList = []
        return false
      }
      this.fileList = [file]
    },
  }

}
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}

.col-title-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.col-title {
  width: max-content;
  font-size: 16px;
  font-weight: bold;
  flex: 1;
}

/deep/ .el-card__header {
  background: #F4F4F4 !important;
}

.tips {
  background: #FCF8E3;
  padding: 10px;
  border: solid 1px #FAEBCC;
  color: #8A6D3B;
  margin-bottom: 20px;
}

.tips span {
  font-weight: bold;
}
</style>